<script lang="ts" setup>
import { computed } from 'vue';
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';

const props = defineProps<{
  name: string;
  tagsList: string[];
  address: string;
}>();

const tags = computed(() => {
  if (!props.tagsList) return '';
  return props.tagsList.join('|');
});

const { t } = useLocale();
const router = useRouter();
</script>

<template>
  <view class="details-base-info">
    <view class="details-base-info__name">{{ name }}</view>
    <view class="flex justify-between items-center details-base-info__meta">
      <view class="details-base-info__amenities">{{ tags }}</view>
      <view class="flex items-center" @click="router.to(RouteMap.hotelRoomAmenities)">
        <text class="details-base-info__amenities">{{ t('LHTKey_highlightsAndAmenities') }}</text>
        <uv-icon name="arrow-right" size="12" />
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<style lang="scss">
.details-base-info {
  margin-bottom: 20rpx;
  padding: 32rpx;
  border-radius: 28rpx 28rpx 0 0;
  background-color: white;

  &__name {
    margin-bottom: 8rpx;
    font-weight: 500;
    font-size: 48rpx;
    line-height: 68rpx;
    color: #3d3d3d;
  }

  &__meta {
    margin-bottom: 20rpx;
  }

  &__amenities {
    font-size: 24rpx;
    line-height: 34rpx;
    color: #979797;
  }
}
</style>
